<template>
  <div class="message">
    <header>
      <span class="logo">
        <img src="../img/2.gif" alt />
      </span>
      <span>消息列表</span>
      <span class="return" @click="back()">
        <van-icon name="arrow-left" />
      </span>
    </header>
    <main>
      <van-tabs v-model="active">
        <van-tab title="消息">
          <div class="list-1" v-for="(item,index) in list" :key="index">
            <van-swipe-cell>
              <van-card
                :desc="item.title"
                :title="item.name"
                class="goods-card"
                thumb="https://img01.yzcdn.cn/vant/cat.jpeg"
              />
              <template #right>
                <van-button square text="删除" type="danger" class="delete-button" @click="messageDel(item.id)"/>
              </template>
            </van-swipe-cell>
          </div>
        </van-tab>
        <van-tab title="公告">公告</van-tab>
      </van-tabs>
    </main>
  </div>
</template>

<script>
import axios from "axios";
import { log } from "util";
export default {
  data() {
    return {
      active: 0,
      list:[]
    };
  },
  created(){
    //调用函数
    this.messageList();
  },
  methods: {
    //返回主页面
    back() {
      this.$router.push(`/`);
    },

    //渲染消息列表
    messageList() {
      axios({
        url: "/api/messageList"
      }).then(res => {
        console.log(res);

        if (res.data.code === 1) {
          this.list = res.data.data;
        } else {
          this.$router.push(`/login`);
        }
      });
    },

    //删除消息列表
    messageDel(id) {
      axios({
        url:'/api/messageDel',
        method:'post',
        data:{
          id:id
        }
      }).then(res => {
        //调用函数
        this.messageList();
      })
    }
  }
};
</script>

<style>
.message {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.message header {
  width: 100%;
  height: 60px;
  background-color: #2997fb;
  text-align: center;
  line-height: 60px;
}

.message header span {
  color: white;
  float: right;
  margin-right: 70px;
  vertical-align: middle;
}

.message header .logo {
  float: right;
  /* margin-top: 8px; */
  margin-right: 10px;
  /* vertical-align: middle; */
}

.message header .return {
  float: left;
  margin-left: 30px;
  vertical-align: middle;
  margin-top: 3px;
}

.message main .list-1{
  margin-top: 6px;
}

.message main .list-1 img{
  border-radius: 50%;
}
</style>